<template>
  <section>
      <div class="movie-group">
          <img src="../assets/bg.jpg" alt="">
          <div class='movie-desc-group'>
              <h2>我的电影院（一店）</h2>
              <div class="movie-desc">
                  <div class="movie-desc-left">
                      {{name}} | {{source}} | {{hall}}
                  </div>
                  <div class="movie-desc-right">
                      {{time}}
                  </div>
              </div>
          </div>
      </div>

    <div class="section">
        <ul class="reveal-group">
            <li class="icon-seat-group">
                <i class="icon sure"></i><span class="text">可选</span>
            </li>
            <li class="icon-seat-group">
                <i class="icon selected"></i><span class="text">已选</span>
            </li>
            <li class="icon-seat-group">
                <i class="icon not"></i><span class="text">不可选</span>
            </li>
        </ul>
        <section class="screen-group">

        </section>
        <ul class="seat-group">
            <li v-for="index of 45" :key="index">
                <i class="icon selected" @click="seat_selection(index,'del')" :data-index="index" v-if="select_position && select_position.indexOf(index) != -1"></i>
                <i class="icon sure" @click="seat_selection(index,'add')" :data-index="index" v-else-if="allow && allow.indexOf(index) != -1"></i>

                <i class="icon not" :data-index="index" v-else></i>
            </li>
        </ul>
        <div class="summary-group">
            <p>
                您已经选择<span>{{select_position.length}}</span>个座位，共 <span class="price">{{price*select_position.length}}</span> 元
            </p>
            <button class="submit-btn">确认选座</button>
        </div>
    </div>
  </section>
</template>

<script>
export default {
    name: 'Index',
    props: {
        // msg: String
    },
    data (){
        return {
            id:10,
            name: "疯狂动物城",
            source:'原版3D',
            hall:'4DX厅',
            time:'18:30',
            price: 32,
            allow: [1,2,3,6,8,10,20,21],//可以选择的
            select_position: [],//我已经选中的
        }
    },
    methods:{
        seat_selection (id, type){
            if (type == 'add'){
                this.select_position.push(id);
            }else{
                for(let i=this.select_position.length; i>0; i--){
                    if(this.select_position[i] == id){
                        this.select_position.splice(i, 1);
                    }
                }
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.section{
    padding:0 1rem;
    box-sizing: border-box;
}
.movie-group{
    position: relative;
    height: 11rem;
    overflow: hidden;
}
.movie-group img{
    width:100%;
}
.movie-group .movie-desc-group{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: #fff;
    background: -webkit-linear-gradient(left,  #ecaa40 , #ff3361); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right,  #ecaa40, #ff3361); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,  #ecaa40, #ff3361); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,rgba(236,170,64, 0.5) , rgba(255,51,97, .4));
}
.movie-desc-group h2{
    text-align: center;
    margin-top:4.6rem;
    font-size:1.2rem;
    color:#fff;
}
.movie-desc{
    padding:0 1rem;
    margin-top:2.6rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    color: #fff;
    font-size: 0.8rem;
}
.movie-desc-right{
   /* font-size:1.8rem;
    font-weight: 500; */
}
.film-select-group{
    text-align: center;
    margin-top:2rem;
}
.film-select-group label{
    font-size: 1rem;
}
.film-select-group select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    outline: none;
    height:2rem;
    border:0;
    padding:0 0.5rem;
    border-radius: 0.4rem;
    width:11rem;
}
.reveal-group{
    overflow: hidden;
    width:15rem;
    margin:2rem auto 0;
    padding:.4rem 0;
    background:#1f1b2c;
    padding-left:2.8rem;
    color: #fff;
}

.icon-seat-group{
    float:left;
    font-size:0.8rem;
    margin-right:1rem;
}
.icon-seat-group .text{
    margin-left:0.5rem;
}
.screen-group{
    width:13rem;
    height:0;
    margin:2rem auto;

    border-top: 4rem solid #999;
    border-left: 2.5rem solid transparent;
    border-right: 2.5rem solid transparent;
}

.seat-group{
    overflow: hidden;
    width:18rem;
    box-sizing: border-box;
    margin:0 auto;
}
.seat-group li{
    float:left;
    margin-right:1rem;
}
.seat{
  float:left;
  margin-right:1rem;
}
.summary-group{
    margin-top: 1rem;
    font-size: 0.8rem;
}
.summary-group .price{
    font-size: 1.6rem;
    font-weight: 500;
}
.submit-btn{
    display: block;
    margin:1rem auto;
    line-height: 2.6rem;
    padding:0 7rem;
    border:0;
    border-radius: 4rem;
    background: rgb(243,129,155);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}


.icon{
    display: inline-block;
    width:1rem;
    height:0.7rem;
    background: #ccc;
    border-radius: 5rem 5rem 0 0;
}
.selected{
    background: #5ff6fb;
}
.not{
    background: #e85151;
}
</style>
